// 人员选择器
<template>
  <div class="chooser_container">
    <Button icon="plus" @click="handleAdd" class="c_c_button">人员选择</Button>
    <p style="padding: 0; margin: 0">
      <span v-for="item in selectedData" :key="item.id" class="selectItem"
        >{{ item.name
        }}<span @click="deleteForSelectedData(item)">x</span></span
      >
    </p>
    <a-modal
      title="人员选择"
      v-model="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :width="600"
      okText="确认"
      cancelText="取消"
    >
      <div class="c_modal_content">
        <div class="c_modal_all">
          <Tree
            v-model="checkedKeys"
            @select="onSelectNode"
            :tree-data="treeData"
            :load-data="onLoadData"
          />
        </div>
        <div class="c_modal_selected">
          <p v-for="item in temporarySelected" :key="item.id">
            {{ item.name }}
            <Button size="small" type="link" @click="deleteSelected(item)"
              >删除</Button
            >
          </p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Button from "ant-design-vue/lib/button/button";
import Tree from "ant-design-vue/lib/tree";

import axios from "axios";

export default {
  props: {
    requestConfig: {
      type: Object,
    },
    propsSelected: Array, //[{name:'',id:''}]
  },

  components: {
    Button,
    Tree,
  },

  watch: {},
  computed: {},
  data() {
    return {
      visible: false,
      selectedData: JSON.parse(JSON.stringify(this.propsSelected)),
      treeData: [],
      temporarySelected: [],
    };
  },

  mounted() {
    // 获取可选的角色
    this.onLoadData();
  },

  methods: {
    onLoadData(treeNode) {
      console.log("1111");
      return new Promise((resolve) => {
        if (treeNode && treeNode.dataRef.children) {
          resolve();
          return;
        }
        let url = `${this.requestConfig.getPersonUrl}${
          treeNode ? '/'+treeNode.dataRef.id : "/root"
        }`;
        axios
          .get(url, {
            headers: {
              [this.requestConfig.tokenField]: this.requestConfig.token,
            },
          })
          .then(
            (res) => {
              let result = res.data;
              if (result.code === 200 && result.success) {
                let type = 0;
                if (result.data.flag === "staff") {
                  type = 1;
                }
                let data = result.data.data.map((e, i) => ({
                  id: type ? e.staffCode : e.unitCode,
                  name: type ? e.staffName : e.unitName,
                  title: type ? e.staffName : e.unitName,
                  key: `${treeNode ? treeNode.eventKey + "-" + i : i + ""}`,
                  isLeaf: !!type,
                }));

                if (treeNode) {
                  treeNode.dataRef.children = data;
                  this.treeData = [...this.treeData];
                } else {
                  // 首次请求
                  this.treeData = data;
                }
                resolve();
              }
            },
            (err) => {
              console.log("err", err);
            }
          );
      });
    },
    onSelectNode(selected, { node }) {
      const nodeData = node.dataRef;
      const selectData = {
        id: nodeData.id,
        name: nodeData.name,
      };
      if (
        !node.isLeaf ||
        this.temporarySelected.map((e) => e.id).indexOf(selectData.id) !== -1
      ) {
        return;
      }
      this.temporarySelected.push(selectData);
    },

    getSelectedData() {
      return JSON.parse(
        JSON.stringify(
          this.selectedData.map((e) => ({ name: e.name, id: e.id }))
        )
      );
    },
    handleAdd() {
      this.visible = true;
      this.temporarySelected = [...this.selectedData];
    },

    deleteSelected(item) {
      let { id } = item;

      this.temporarySelected = [
        ...this.temporarySelected.filter((e) => e.id !== id),
      ];
    },

    deleteForSelectedData(item) {
      this.deleteSelected(item);
      let { id } = item;
      let selectedData = [...this.selectedData];
      this.selectedData = selectedData.filter((e) => e.id !== id);
    },
    handleOk() {
      this.selectedData = [...this.temporarySelected];
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.chooser_container {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.c_c_button {
  width: 120px;
}

.selectItem {
  display: inline-block;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 3px;
  padding-right: 0px;
  background-color: #eee;
  border-radius: 4px;
}

.selectItem span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  height: 15px;
  width: 15px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  border-radius: 50%;

  /* background-color: red; */
}
.selectItem span:hover {
  /* font-size: 20px; */
  color: blue;
}

.c_modal_content {
  display: flex;
  flex-direction: row;
}

.c_modal_content > div {
  border: 1px solid #ddd;
  padding: 10px;
  height: calc(100vh - 400px);
  overflow-y: scroll;
}

.c_modal_content > div::-webkit-scrollbar {
  width: 5px;
}
.c_modal_content > div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.c_modal_all {
  flex: 1;
  /* background-color: red; */
  margin-right: 10px;
}

.c_modal_content .c_modal_selected {
  padding: 5px 0 0 5px;
  flex: 1;
}

.c_modal_selected p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* background-color: #ddd; */
  padding: 5px 10px;
  margin: 0;
}

.c_modal_selected p:hover {
  background-color: #eee;
}
</style>